import React, { useEffect, useState } from 'react'
import styles from './index.module.css'
import http from '../../utils/http'
import dayjs from 'dayjs'
import { InfiniteScroll, Switch } from 'antd-mobile'

function Index() {
  const [list, setList] = useState([])
  const [start, setStat] = useState('北京')
  const [end, setEnd] = useState('深圳')
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'))
  const [isSpeed, setIsSpeed] = useState(false)
  const [isSeat, setIsSeat] = useState(false)
  const [isDesc, setIsDesc] = useState(false)
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
  const getList = async () => {
    const res = await http.post('/api/trip/train', {
      start,
      end,
      date,
      isSpeed,
      isSeat,
      isDesc,
      page
    })
    console.log(res);

    const { data, code } = res.data

    if (code === 200) {
      setList([...list, ...data])
      setPage((prev) => prev + 1)
    }

    if (data.length === 0) {
      setHasMore(false)
    }
  }
  useEffect(() => {
    getList()
  }, [])
  return (
    <div className={styles.box_wroe}>
      <div className={styles.main_wroe}>
        {
          list?.map((item, ind) => (
            <div key={ind} className={styles.list_wroe}>
              <span>{item.start}</span>
              <span>{item.startTime}</span>
              <span>{item.end}</span>
              <span>商务座 <b>有票</b></span>
              <span>一等座 <b>有票</b></span>
              <span>二等座 <b>有票</b></span>
            </div>
          ))
        }
        <InfiniteScroll loadMore={getList} hasMore={hasMore} />
      </div>
      <div className={styles.footer_wroe}>
        <span>
          <Switch
            checked={isDesc}
            onChange={(val) => {
              setIsDesc(val)
              setPage(1)
              setList([])
            }}
          />
          升序降序
        </span>
        <span>
          <Switch
            checked={isSpeed}
            onChange={(val) => {
              setIsSpeed(val)
              setPage(1)
              setList([])
            }}
          />
          是否高铁
        </span>
        <span>
          <Switch
            checked={isSeat}
            onChange={(val) => {
              setIsSeat(val)
              setPage(1)
              setList([])
            }}
          />
          是否有票
        </span>
      </div>
    </div>
  )
}

export default Index
